<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="订单编号:">
        <el-input v-model="form.number" size="medium" placeholder="请输入订单编号" />
      </el-form-item>
      <el-form-item label="买家:">
        <el-input v-model="form.user_nickname" size="medium" placeholder="请输入买家姓名" />
      </el-form-item>
      <el-form-item label="收货人:">
        <el-input v-model="form.receiver_name" size="medium" placeholder="请输入收货姓名" />
      </el-form-item>
      <el-form-item label="收货人电话:">
        <el-input v-model="form.receiver_phone" size="medium" placeholder="请输入收货人电话" />
      </el-form-item>
      <el-form-item label="配送方式:">
        <el-select v-model="value" placeholder="请选择" @change="chooseType">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="下单日期:">
        <el-date-picker
          v-model="value1"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="datePickChange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
    </el-form>
    <div class="operation">
      <el-button type="primary" @click="checkData">筛选</el-button>
      <el-button type="primary" @click="clearData">清空</el-button>
      <el-button type="primary" @click="exportData">导出EXCEL</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        number: "",
        user_nickname: "",
        receiver_name: "",
        receiver_phone: "",
        start_at: "",
        end_at: "",
        delivery_type: ""
      },
      options: [
        {
          value: "1",
          label: "自提"
        },
        {
          value: "2",
          label: "快递"
        }
      ],
      value: "",
      value1: ""
    };
  },
  created() {},
  methods: {
    // 筛选
    checkData() {
      this.$emit("getFilter", this.form);
    },
    chooseType() {
      this.form.delivery_type = this.value;
    },
    // 清空
    clearData() {
      this.form = {
        number: "",
        user_nickname: "",
        receiver_name: "",
        receiver_phone: "",
        start_at: "",
        end_at: "",
        delivery_type: ""
      };
      this.value = "";
      this.form.start_at = "";
      this.form.end_at = "";
      this.$emit("getFilter", this.form);
    },
    // 导出excel
    exportData() {},
    datePickChange(val) {
      if (val) {
        this.form.start_at = val[0];
        this.form.end_at = val[1];
      } else {
        this.form.start_at = "";
        this.form.end_at = "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.el-form {
  display: flex;
  align-items: center;
  white-space: nowrap;
  .el-form-item {
    margin-bottom: 0;
    margin-right: 10px;
  }
}
.operation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}
</style>
